<template>
    <Card>
        <Row type="flex" :gutter="8" align="middle">
            <Col class="ivu-mb-8"><DatePicker v-width="200" v-model="date" :options="options" type="daterange" @on-change="changeAskData" placeholder="请选择对话日期"></DatePicker></Col>
            <Col class="ivu-mb-8">
            <Select v-width="200" placeholder="对话软件" v-model="params.source_soft" @on-change="changeAskData" clearable >
                <Option v-for="item in sourceSoftList" :value="item.value" :key="item.value">{{ item.title }}</Option>
            </Select>
            </Col>
            <Col class="ivu-mb-8"><TreeSelect v-width="200" v-model="params.source_channel_id" :data="channelList" @on-change="changeAskData" placeholder="请选择渠道" clearable /></Col>
            <Col style="min-width:200px" class="ivu-mb-8">
            <Select :max-tag-count="3" multiple placeholder="名片标签筛选" v-model="params.card_tag" @on-change="changeAskData" clearable >
                <Option v-for="(item,index) in tagList" :value="item" :key="index">{{ item }}</Option>
            </Select>
            </Col>
            <Col class="ivu-mb-8">
            <Input placeholder="IP、ID搜索" v-model="params.keyword" @on-enter="changesearch" @on-clear="changesearch" clearable></Input>
            </Col>
            <Col class="ivu-mb-8"><Checkbox v-model="params.have_repeat" @on-change="changeAskData">重复数据</Checkbox></Col>
        </Row>
        <Table :columns="columns" :data="data" :loading="loading" :max-height="550">
            <template slot-scope="{ row }" slot="option">
                <a @click="handleEit(row)" v-hasC="{
                    name: 'v1-marketing-data-dialogue-edit',
                    flag: 'v1/marketing/data/dialogue-edit',
                }">编辑</a>
                <Divider type="vertical"  v-hasC="{
                    name: 'v1-marketing-data-delete-dialogue',
                    flag: 'v1/marketing/data/delete-dialogue',
                }"/>
                <a @click="handleDelete(row)" v-hasC="{
                    name: 'v1-marketing-data-delete-dialogue',
                    flag: 'v1/marketing/data/delete-dialogue',
                }">删除</a>
            </template>
            <template slot-scope="{ row }" slot="ip">
                <Tooltip max-width="200" :content="row.ip ? row.ip : '/'"><div style="width:120px;text-overflow:ellipsis;overflow:hidden;white-space: nowrap;" :style="params.have_repeat?'color:#ed4014;':''">{{row.ip ? row.ip : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="visitor_static_id">
                <Tooltip max-width="200" :content="row.visitor_static_id ? row.visitor_static_id : '/'"><div style="width:180px;text-overflow:ellipsis;overflow:hidden;white-space: nowrap;" :style="params.have_repeat?'color:#ed4014;':''">{{row.visitor_static_id ? row.visitor_static_id : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="member_name">
                <Tooltip max-width="200" :content="row.member_name ? row.member_name : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 150px">{{row.member_name ? row.member_name : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="name">
                <Tooltip max-width="200" :content="row.name ? row.name : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 120px">{{row.name ? row.name : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="card_tag">
                <Tooltip max-width="200" :content="row.card_tag ? row.card_tag : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 120px">{{row.card_tag ? row.card_tag : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="keywords">
                <Tooltip max-width="200" :content="row.keywords ? row.keywords : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 160px">{{row.keywords ? row.keywords : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="wechat_num">
                <Tooltip max-width="200" :content="row.wechat_num ? row.wechat_num : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 120px">{{row.wechat_num ? row.wechat_num : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="search_engine">
                <Tooltip max-width="200" :content="row.search_engine ? row.search_engine : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 120px">{{row.search_engine ? row.search_engine : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="source_page">
                <Tooltip max-width="200" :content="row.source_page ? row.source_page : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 120px">{{row.source_page ? row.source_page : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="search_host">
                <Tooltip max-width="200" :content="row.search_host ? row.search_host : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 120px">{{row.search_host ? row.search_host : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="province">
                <Tooltip max-width="200" :content="row.province ? row.province : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 120px">{{row.province ? row.province : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="city">
                <Tooltip max-width="200" :content="row.city ? row.city : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 120px">{{row.city ? row.city : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="chat_id">
                <Tooltip max-width="200" :content="row.chat_id ? row.chat_id : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 120px">{{row.chat_id ? row.chat_id : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="source_channel_name">
                <Tooltip max-width="200" :content="row.source_channel_name ? row.source_channel_name : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 120px">{{row.source_channel_name ? row.source_channel_name : '/'}}</div></Tooltip>
            </template>
            <template slot-scope="{ row }" slot="source_soft_str">
                <Tooltip max-width="200" :content="row.source_soft_str ? row.source_soft_str : '/'"><div style="white-space: nowrap;text-overflow:ellipsis;overflow:hidden;width: 120px">{{row.source_soft_str ? row.source_soft_str : '/'}}</div></Tooltip>
            </template>
            <template slot="footer">
                <Page
                    show-total show-elevator
                    show-sizer transfer
                    :total="total"
                    :current.sync="params.page"
                    :page-size="params.pageSize"
                    :page-size-opts="pageOpts"
                    @on-change="changepage"
                    @on-page-size-change="changepageSize"
                    style="text-align: center;"
                />
            </template>
        </Table>
        <Modal v-model="modalStatus" title="编辑对话" width="700" @on-cancel="canceledit(formValidate)">
            <Form ref="formValidate" :model="FormData" :rules="ruleValidate" :label-width="100" >
                <Row :gutter="8">
                    <Col span="12">
                    <FormItem label="访客ID：">
                        <span>{{FormData.visitor_static_id}}</span>
                    </FormItem>
                    <FormItem label="微信号：">
                        <span>{{FormData.wechat_num}}</span>
                    </FormItem>
                    <FormItem label="来源页：">
                        <span>{{FormData.source_page}}</span>
                    </FormItem>
                    <FormItem label="一级渠道：">
                        <Select v-model="FormData.channel_pid" filterable clearable @on-change="changechannel">
                            <Option v-for="item in Pchannellist" :value="item.value" :key="item.value">{{
                            item.label }}</Option>
                        </Select>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="IP：">
                        <span>{{FormData.ip}}</span>
                    </FormItem>
                
                    <FormItem label="手机号：">
                        <span>{{FormData.mobile}}</span>
                    </FormItem>
               
                    <FormItem label="搜索域名：">
                        <span>{{FormData.search_host}}</span>
                    </FormItem>
               
                    <FormItem label="二级渠道：" prop="channel_id"> 
                        <Select v-model="FormData.channel_id" filterable clearable>
                            <Option v-for="item in child_source_channel" :value="item.value" :key="item.value">{{
                            item.label }}</Option>
                        </Select>
                    </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot='footer'>
                <Button @click='canceledit(formValidate)'>取消</Button>
                <Button type='primary' @click='submitedit(formValidate)'>确定</Button>
            </div>
        </Modal>
    </Card>
</template>

<script>
    import { marketingdatadialoguelist, marketingconsumegetsourcechannellist, marketingdatadeletedialogue,getPchannel,dialogueEdit} from '@/api/hqapi/networkMarketing.js';
    import {
        patientindexsearchchildchannel,
    } from '@/api/hqapi';
import { TreeChild } from 'view-design';
    export default {
        name: 'dialogs',

        data () {
            return {
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
                formValidate: 'formValidate',
                loading: false,
                pageOpts: [10, 20, 50, 100],
                total: 0,
                data: [],
                columns: [
                    { title: '对话时间', key: 'dialogue_time', width: 170 },
                    { title: '归属客服', slot: 'member_name', key: 'member_name', width: 150 },
                    { title: '访客姓名', slot: 'name', key: 'name', width: 120 },
                    { title: '名片标签', slot: 'card_tag', key: 'card_tag', width: 120 },
                    { title: 'IP', slot: 'ip', key: 'ip', width: 120 },
                    { title: '搜索词', slot: 'keywords', key: 'keywords', width: 160 },
                    { title: '是否开口', key: 'send_type_str', width: 160 },
                    { title: '访客ID', slot: 'visitor_static_id', key: 'visitor_static_id', width: 180 },
                    { title: '微信号', slot: 'wechat_num', key: 'wechat_num', width: 120 },
                    { title: '手机号', key: 'mobile', width: 130 },
                    { title: '搜索引擎', slot: 'search_engine', key: 'search_engine', width: 120 },
                    { title: '来源页', slot: 'source_page', key: 'source_page', width: 120 },
                    { title: '搜索域名', slot: 'search_host', key: 'search_host', width: 120 },
                    { title: '创建时间', key: 'created_at', width: 170 },
                    { title: '编辑时间', key: 'updated_at', width: 170 },
                    { title: '省份', slot: 'province', key: 'province', width: 120 },
                    { title: '市', slot: 'city', key: 'city', width: 120 },
                    { title: '对话ID', slot: 'chat_id', key: 'chat_id', width: 120 },
                    { title: '渠道', slot: 'source_channel_name', key: 'source_channel_name', width: 120 },
                    { title: '对话软件', slot: 'source_soft_str', key: 'source_soft_str', width: 120 },
                    { title: '操作', slot: 'option', width: 120,fixed: 'right' }
                ],
                modalStatus: false,
                date: [],
                params: { start_time: '', end_time: '', page: 1, pageSize: 20, source_soft: '', source_channel_id: '', card_tag: [], have_repeat: false,keyword: '' },
                sourceSoftList: [],
                tagList: [],
                channelList: [],
                Pchannellist: [],
                FormData: {
                    channel_id: '',
                    channel_pid: ''
                },
                ruleValidate: {
                    channel_id: [ { required: true, message: '请选择二级渠道', trigger: 'change' }]
                },
                child_source_channel: []

            };
        },

        mounted () {
            this.date = [this.$Date().subtract(1, 'day').format('YYYY-MM-DD'), this.$Date().subtract(1, 'day').format('YYYY-MM-DD')];
            this.params.start_time = this.date[0];
            this.params.end_time = this.date[1];
            // this.initial()
        },
        methods: {
            initial () {
                this._getPchannel();
                marketingconsumegetsourcechannellist().then(res => {
                    this.channelList = res;
                    this.askData();
                });
            },
            askData () {
                this.loading = true;
                let params = {
                    start_time: this.params.start_time,
                    end_time: this.params.end_time,
                    source_soft: this.params.source_soft,
                    source_channel_id: this.params.source_channel_id,
                    card_tag: this.params.card_tag.join(','),
                    have_repeat: this.params.have_repeat ? '1' : '0',
                    keyword: this.params.keyword,
                    page: this.params.page,
                    pageSize: this.params.pageSize
                };
                marketingdatadialoguelist(params).then(res => {
                    this.data = res.list.list;
                    this.total = res.list.total;
                    this.sourceSoftList = res.source_soft;
                    this.tagList = res.tag_list;
                    this.loading = false;
                });
            },
            changeAskData () {
                this.params.start_time = this.date[0];
                this.params.end_time = this.date[1];
                this.params.page = 1;
                this.askData();
            },
            changesearch(){
                this.params.start_time = this.date[0];
                this.params.end_time = this.date[1];
                this.params.page = 1;
                this.askData();
            },
            changepage (e) {
                this.params.page = e;
                this.askData();
            },
            changepageSize (e) {
                this.params.page = 1;
                this.params.pageSize = e;
                this.askData();
            },
            // 获取一级渠道
            _getPchannel(){
                getPchannel().then(res => {
                    this.Pchannellist = res;
                });
            },
             changechannel(id) {
                this.child_source_channel = [];
                patientindexsearchchildchannel({ pid: id }).then(res => {
                    this.child_source_channel = res.list;
                });
            },
            handleEit(row){
                this.FormData = row;
                this.changechannel(row.source_channel_pid);
                this.FormData.channel_id = row.source_channel_id;
                this.FormData.channel_pid = row.source_channel_pid;
                this.modalStatus = true;
            },
            canceledit(name){
                this.modalStatus = false;
                this.$refs[name].resetFields();
                 this.askData();
            },
            submitedit(name){
                 this.$refs[name].validate((valid) => {
                    if (valid) {
                        const params = {
                            id: this.FormData.id,
                            channel_id: this.FormData.channel_id,
                            channel_pid: this.FormData.channel_pid
                        };
                        dialogueEdit(params).then(res => {
                            this.canceledit(name);
                            this.$Message.success('编辑成功');
                        });
                        
                    }
                });
            },
            handleDelete (row) {
                this.$Modal.confirm({
                    title: '删除提示',
                    content: '<p>删除后不再统计此条对话</p>',
                    onOk: () => {
                        marketingdatadeletedialogue({ id: row.id }).then(() => {
                            this.$Message.success('删除成功');
                            this.askData();
                        });
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>

</style>
